<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors Test</title>
    <!-- 引入外部样式文件 -->
    <link rel="stylesheet" href="style.css">
    <style>
        /* 内部样式 - 元素选择器 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
        }

        /* 内部样式 - 类选择器 */
        .internal-highlight {
            background-color: lightgreen;
            padding: 5px;
        }

        /* 内部样式 - ID 选择器 */
        #internal-title {
            color: orange;
            text-decoration: underline;
        }

        /* 内部样式 - 后代选择器 */
        article ul {
            list-style-type: square;
        }

        /* 内部样式 - 子选择器 */
        section > h4 {
            color: purple;
        }

        /* 内部样式 - 相邻兄弟选择器 */
        h5 + p {
            font-style: italic;
        }

        /* 内部样式 - 通用兄弟选择器 */
        h6 ~ div {
            border: 1px solid blue;
            padding: 10px;
        }

        /* 内部样式 - 属性选择器 */
        input[type="email"] {
            border: 2px solid red;
        }

        /* 内部样式 - 伪类选择器 */
        button:hover {
            background-color: darkblue;
            color: white;
        }

        /* 内部样式 - 伪元素选择器 */
        blockquote::first-letter {
            font-size: 2em;
            color: brown;
        }
    </style>
</head>
<body>
    <!-- ID 选择器测试 -->
    <div id="header">
        <h1>CSS 选择器测试</h1>
    </div>

    <!-- 类选择器测试 -->
    <div class="container">
        <!-- 子选择器测试 -->
        <p>这是容器的直接子元素段落，会显示为斜体。</p>
        <div>
            <p>这是容器内嵌套的段落，不会显示为斜体。</p>
        </div>

        <!-- 后代选择器测试 -->
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>

        <!-- 相邻兄弟选择器测试 -->
        <h2>相邻兄弟选择器测试</h2>
        <p>这是紧跟在 h2 后面的段落，颜色会变灰。</p>
        <p>这是另一个段落，不受相邻兄弟选择器影响。</p>

        <!-- 通用兄弟选择器测试 -->
        <h3>通用兄弟选择器测试</h3>
        <p>这是 h3 之后的段落，会有左边框。</p>
        <p>这是另一个 h3 之后的段落，也会有左边框。</p>

        <!-- 属性选择器测试 -->
        <input type="text" placeholder="输入文本">
        <input type="password" placeholder="输入密码">

        <!-- 伪类选择器测试 -->
        <a href="#">鼠标悬停查看效果</a>

        <!-- 伪元素选择器测试 -->
        <p>这是一个段落，第一行文字会变粗体。CSS 选择器是非常强大的工具，可以帮助我们精确地选择和样式化 HTML 元素。</p>

        <!-- 内部样式测试 -->
        <h2 id="internal-title">内部样式选择器测试</h2>
        <p class="internal-highlight">这是使用内部样式类选择器高亮的段落。</p>
        <!-- 
        后代选择器测试
        对应 CSS 选择器: article ul
        用途: 选中所有 <article> 元素内部的 <ul> 元素，无论嵌套多深，可对文章内的列表进行样式统一设置
        -->
        <article>
            <ul>
                <li>后代选择器测试项 1</li>
                <li>后代选择器测试项 2</li>
            </ul>
        </article>
        <!-- 
        子选择器测试
        对应 CSS 选择器: section > h4
        用途: 仅选中作为 <section> 元素直接子元素的 <h4> 元素，用于精准控制特定层级标题样式
        -->
        <section>
            <h4>子选择器测试标题</h4>
            <p>这是 section 内的段落。</p>
        </section>
        <!-- 
        相邻兄弟选择器测试
        对应 CSS 选择器: h5 + p
        用途: 选中紧跟在 <h5> 元素之后的第一个同级 <p> 元素，可实现标题后首段特殊样式
        -->
        <h5>相邻兄弟选择器测试标题</h5>
        <p>这是紧跟 h5 后的段落，会显示为斜体。</p>
        <!-- 
        通用兄弟选择器测试
        对应 CSS 选择器: h6 ~ div
        用途: 选中在 <h6> 元素之后的所有同级 <div> 元素，可对标题后的同类元素批量设置样式
        -->
        <h6>通用兄弟选择器测试标题</h6>
        <div>这是 h6 后的 div，会有蓝色边框。</div>
        <!-- 
        属性选择器测试
        对应 CSS 选择器: input[type="email"]
        用途: 选中所有 type 属性值为 "email" 的 <input> 元素，可对特定类型输入框定制样式
        -->
        <input type="email" placeholder="输入邮箱">
        <!-- 
        伪类选择器测试
        对应 CSS 选择器: button:hover
        用途: 当鼠标悬停在 <button> 元素上时应用样式，增强交互反馈
        -->
        <button>悬停查看效果</button>
        <!-- 
        伪元素选择器测试
        对应 CSS 选择器: blockquote::first-letter
        用途: 选中 <blockquote> 元素内的第一个字母，可实现首字母特殊排版效果
        -->
        <blockquote>这是一个引用块，首字母会变大且变棕色。</blockquote>
    </div>

    <!-- 
    元素选择器测试
    对应 CSS 选择器: footer
    用途: 选中文档中所有的 <footer> 元素，统一设置页脚样式
    -->
    <footer>
        &copy; 2025 CSS 选择器测试
    </footer>
</body>
</html>